<template>
	<view class="list">
		<div class="list-box">
			<scroll-view scroll-y="true" class="box-left">
				<view :class="idx==i?'active':''"  v-for="item,i in arrData" :key="item._id" @click="additem(item._id,i)">{{item.dep_ment}}</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="box-right">
				<view v-for="item in arrList" :key="item.dep_id">{{item.dep_name}}</view>
			</scroll-view>
		</div>
	</view>
</template>

<script>
	import {
		getdepartment,getreglist
	} from "../../utils/api.js"
	export default {
		data() {
			return {
				arrData: [],
				arrList:[],
				idx:0
			};
		},
		methods: {
			//父科列表
			getData() {
				getdepartment().then(res => {
					console.log(res,27);
					this.arrData=res.data.data
				})
			},
			additem(id,i){
				this.idx=i
				getreglist(id).then(res=>{
					console.log(res,34);
					this.arrList=res.data.data[0].dep_ment_list
				})
			}
		},
		onLoad() {
			this.getData()
		}
	}
</script>

<style lang="scss">
	.list {
		width: 100%;
		height: 100vh;
	}

	.list-box {
		width: 100%;
		height: 100vh;
		display: flex;

		.box-left {
			width: 30%;
			height: 100vh;
			background-color: #ddd;
			view{
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
			}
		}

		.box-right {
			width: 70%;
			height: 100vh;
		}
		.active{
			background-color: #fff;
			color: aqua;
		}
	}
</style>
